 import {connect } from 'react-redux'
 import { useReducer } from 'react';
import * as Counter   from '../../actions/counter'
import { Button } from 'antd';
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    case "addAsync":
      return 
    case "decrementAsync":
       return state + 1
    case "Decrement_NUM":
      return state - action.num
    case "ADD_NUM":
      return state + action.num
    default:
      return state
  }
}



 function ShowCounter(props) {
  const [state, dispatchReducer] = useReducer(counter,100)

  const {dispatch} = props
    
  // 增加
  const handleAdd =  ()=>{
    dispatch(Counter.increment())
  }  
  
  // 减少
  const handledecrement = ()=>{
    dispatch(Counter.decrement())
  }

  // 异步增加
  const handleAddAsync =  ()=>{
    dispatch(Counter.addAsync())
  }  
  
  // 异步减少
  const handledecrementAsync = async ()=>{
    dispatch(Counter.decrementAsync())
  }
  
  // 增加多个
  const AddNum = (num)=>{
    dispatch(Counter.addNum(num))
  }

  // 减少多个
  const decrementNum = (num)=>{
    dispatch(Counter.decrementNum(num))
  }
  return(
    <div className="couterContent">
      <h1>ShowCounter:{props.counter}</h1>
      <Button type="primary" onClick={handleAdd}>增加</Button>
      <Button type="primary" onClick={handledecrement}> 减少 </Button>
      <Button type="primary" onClick={handleAddAsync}>Async 增加</Button>
      <Button type="primary" onClick={handledecrementAsync}>Async 减少 </Button>
      <Button type="primary" onClick={()=>AddNum(5)}>增加 5 </Button>
      <Button type="primary" onClick={()=>decrementNum(10)}> 减少 10 </Button>
      <Button type="primary" onClick={ ()=>dispatchReducer({type:'INCREMENT'})}> useReducer{state} </Button>
      <hr />
    </div>
  )
}


export default  connect((state)=>state)(ShowCounter) 
// export default  ShowCounter
